<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true" >
				<block slot="content">安全生产</block>
			</cu-custom>
			<view class="searchBox">
				<view class="inputBox">
					<view :class="enterpriseName ? 'monthInput val' : 'emty monthInput'"  @click="enterpriseNameShow=true" style="border-bottom: 1px solid #f1f1f1;" >
						{{enterpriseName?enterpriseName:'请选择企业名称'}}
					</view>
					<!-- <u--input
					      placeholder="请输入企业名称"
					      border="bottom" style="border-bottom: 1px solid #f1f1f1;"
					      v-model="enterpriseName"
					    ></u--input> -->
						<view :class="begMonth ? 'monthInput val' : 'emty monthInput'"  @click="begMonthShow=true" style="border-bottom: 1px solid #f1f1f1;">
							{{begMonth?begMonth:'请选择督查开始时间'}}
						</view>
						<view :class="endMonth ? 'monthInput val' : 'emty monthInput'"  @click="endMonthShow=true" >
							{{endMonth?endMonth:'请选择督查结束时间'}}
						</view>
					
				</view>
				
				<view class="btnBox">
					<view class="btn"  @click="handleSearch">
						搜索
					</view>
					<view class="btn reset"  @click="handleReset">
						重置
					</view>
				</view>
				
			</view>
			<scrollYBox styleText="height: 85vh;" @scrolltolower="loadMore" @handleRefresher="handleRefresher" :list="list">
				<template>
					<view style="padding-bottom: 50rpx;">
						<view class="flex flex-direction box" v-for="(item,index) in list" :key="index">
							<view class="row flex">
								<view class="item flex flex-direction">
									<view class="label">
										督查时间
									</view>
									<view class="val">
										{{item.checktime | emptyStr }}
									</view>
								</view>
								<view class="item flex flex-direction">
									<view class="label">
										企业名称
									</view>
									<view class="val">
										{{item.enterprisename | emptyStr }}
									</view>
								</view>
								
							</view>
							<view class="row flex">
								<view class="item flex flex-direction">
									<view class="label">
										企业地址
									</view>
									<view class="val">
										{{item.address | emptyStr }}
									</view>
								</view>
								<view class="item flex flex-direction">
									<view class="label">
										企业负责人
									</view>
									<view class="val">
										{{item.dutyperson | emptyStr }}
									</view>
								</view>
							</view>
							<u-collapse :border="false"  @open="collapseOpen(item,index)" @close="collapseClose(item,index)" ref="collapseRef">
							    <u-collapse-item :border="false" title="查看子公司巡检记录" >
							    </u-collapse-item>
							</u-collapse>
							<view class="u-collapse-content" v-show="item.showChildren">
								<view class="row" v-for="(item2,index2) in item.children" :key="index2">
									<view class="name">
										{{item2.enterprisename}}
									</view>
									<view class="btn" @click="handleDetail(item2.enterprisename)">
										查看子公司
									</view>
								</view>
							</view>
							<view class="row flex">
								<view class="item" style="width: 100%;">
									<view class="btn" @click="handleDetail(item.enterprisename)">
										编辑详情
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</template>
			</scrollYBox>
			
			<view class="footContent">
					<button class="btn" @click="add" type="default">新增</button>
			</view>
			
			
		</scroll-view>
		<u-datetime-picker  :minDate="0"
		                :show="begMonthShow"
		                v-model="begTime" @cancel="begMonthShow=false"
		                mode="date" @confirm="begMonthConfirm"
		        ></u-datetime-picker>
		<u-datetime-picker :minDate="0"
		                :show="endMonthShow"
		                v-model="endTime" @cancel="endMonthShow=false"
		                mode="date" @confirm="endMonthConfirm"
		        ></u-datetime-picker>
		<popUp :isShow="enterpriseNameShow" title='选择企业名称'
			popupWidth="750rpx" confirmText="确定" activeColor="#1890ff"  mode="bottom"
			@confirm="enterpriseNameConfirm" :isBorderBtn="true" @cancel="enterpriseNameShow=false">
			<view class="popupBox">
				<view class="input">
					<u-search  placeholder="请输企业名称"  :showAction="false"
					bg-color="#f6f6f6" v-model="enterpriseNameKey" @search="enterpriseNameSearch" shape="round"></u-search>
				</view>
				<scroll-view scroll-y="true" style="height:300rpx;margin-top: 30rpx;" @scrolltolower="enterpriseNameScrolltolower">
					<view class="arr">
						<view :class="( selectEnterpriseName.id==item.id) ? 'stewardItem activeIndex' : 'stewardItem'" 
							v-for="(item,index) in enterpriseNameList" :key="index" @click="selectEnterpriseName=item">
							<view class="name">
								{{item.mc}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popUp>
	</view>

</template>

<script>
	import popUp from '@/components/pop-up/pop-up.vue';
	export default {
		components:{
			popUp
		 },
		data() {
			return {
				modalName: null,
				contractNumber: '',
				enterpriseName: '',
				refresherBool: false,
				pageNo : 1,
				pageSize : 5,
				listUrl:'/assets.security/dbSecurity/list',
				list:[],
				total: '',
				begMonthShow:false,
				begMonth:'',
				begTime: Number(new Date()),
				endMonthShow:false,
				endMonth:'',
				endTime: Number(new Date()),
				enterpriseNameShow : false,//选择企业
				enterpriseNameKey: '',
				enterpriseName: '',
				selectEnterpriseName: {},
				enterpriseNameList: [],
				enterpriseNamePage: 1,
			}
		},
		methods: {
			enterpriseNameScrolltolower(){
				this.enterpriseNamePage++
				this.getEnterpriseList()
			},
			enterpriseNameSearch(){
				this.enterpriseNamePage = 1
				this.getEnterpriseList()
			},
			enterpriseNameConfirm(){
				this.enterpriseName = this.selectEnterpriseName.mc
				this.enterpriseNameShow = false
			},
			getEnterpriseList(){
				let params ={
					column: 'createTime',
					order: 'desc',
					pageNo: this.enterpriseNamePage,
					pageSize: 10,
					mc: `*${this.enterpriseNameKey}*`
				}
				this.$http.get('/assets.enterprise/dbQyzlb/list',
					{params}
				).then(res=>{
					console.log(res);
						if(res.data.success){
							if(this.enterpriseNamePage==1) this.enterpriseNameList = []
							let list = res.data.result.records
							this.enterpriseNameList = this.enterpriseNameList.concat(list)
							
						}
				})
			},
			collapseClose(item,index){
				let tempItem = item
				tempItem.showChildren = false
				this.$set(this.list,index,tempItem)
			},
			collapseOpen(item,index){
				this.$http.get('/assets.security/dbSecurity/listChildren',{params:{
					enterprisename: item.enterprisename,
					checktime : item.checktime,
					}}).then(res=>{
						if(res.data.success){
							let tempItem = this.list[index]
							tempItem.children =  res.data.result
							tempItem.showChildren =  true
							this.$set(this.list,index,tempItem)
						}
				})
			},
			handleReset(){
				 this.enterpriseName= ''
				 this.begMonth = ''
				 this.endMonth = ''
				 this.begTime = Number(new Date())
				 this.endTime = Number(new Date())
				 this.handleSearch()
			},
			begMonthConfirm(e){
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				//date是整数，否则要parseInt转换
				var time = new Date(e.value)
				var y = time.getFullYear()
				var m = add0(time.getMonth() + 1)
				var d = add0(time.getDate())
				this.begMonth = `${y}-${m}-${d}`
				console.log(this.begMonth);
				this.begMonthShow = false
			},
			endMonthConfirm(e){
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				//date是整数，否则要parseInt转换
				var time = new Date(e.value)
				var y = time.getFullYear()
				var m = add0(time.getMonth() + 1)
				var d = add0(time.getDate())
				this.endMonth = `${y}-${m}-${d}`
				console.log(this.endMonth);
				this.endMonthShow = false
			},
			add(){
				this.goPage('/pages/safetyProduct/productDetail')
			},
			handleDetail(name){
				console.log(name)
				this.goPage('/pages/safetyProduct/productDetail' , {
					name,
				})
			},
			handleSearch(){
				this.pageNo = 1
				this.getList()
			},
			handleRefresher(){
				this.refresherBool = true
				setTimeout(()=>{
					this.refresherBool = false
				},1000)
				this.handleSearch()
			},
			loadMore(){
				if(this.total == this.list.length) return this.setMessage('没有更多了')
				this.pageNo++
				this.getList()
			},
			getList(){
				if(this.begMonth && this.endMonth){
					if(new Date(this.begMonth) > new Date(this.endMonth) ) return this.setMessage('开始时间不能大于结束时间')
				}
				this.$http.get(this.listUrl,{params:{
					column: 'createTime', 
					order: 'desc', 
					pageNo: this.pageNo, 
					pageSize:this.pageSize,
					enterprisename: `*${this.enterpriseName}*`,
					checktime_begin : this.begMonth,
					checktime_end : this.endMonth,
					}}).then(res=>{
						if(this.pageNo==1) this.list = []
						if(res.data.success){
							res.data.result.records.forEach(item=>{
								item.showChildren = false
							})
							this.list = this.list.concat(res.data.result.records)
							this.total = res.data.result.total
						}
				})
			}
		},
		onShow(){
			this.getList()
			this.getEnterpriseList()
		}
	}
</script>

<style lang="scss" scoped>
	.u-collapse-content{
		.row{
			display: flex;
			.name{
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
	}
	.monthInput{
		height: 70rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		padding-left: 20rpx;
	}
	.emty{
		color: #c0c4cc;
	}
	.btnBox{
		display: flex;
		flex-direction: column;
		padding: 10rpx 0;
	}
	.reset{
		margin-top: 30rpx;
		border: 1px solid #f1f1f1;
		background: #fff !important;
		color: #353535 !important;
	}
	.btn{
		padding: 0 30rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	.searchBox{
		// height: calc( 15vh - 45px );
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1px solid #f1f1f1;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			flex: 1;
			padding-right: 30rpx;
			.input{
				
			}
		}
		
	}
	.box{
		background-color: #fff;
		margin: 25rpx;
		border-radius: 8rpx;
		padding: 10rpx;
		.row{
			margin: 10rpx;
		}
	}
	.item{
		width: 50%;
		// flex: 1;
	}
	.label{
		color: #969696;
	}
	.val{
		color: #353535;
		font-size: 32rpx;
		word-wrap: break-word;
	}
	.footContent{
			width: 100%;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(102, 102, 102, 0.05);
			border-radius: 50rpx 50rpx 0px 0px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;
			z-index: 10;
			.btn{
				width: 600rpx;
				height: 100rpx;
				background: #1890ff;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				color: #fff;
			}
		}
		
	.popupBox{
		padding: 0 20rpx;
		.inputRow{
			margin-bottom: 30rpx;
			.label{
				font-size: 24rpx;
				width: auto;
			}
		}
		.note{
			margin-bottom: 30rpx;
			margin-left: 10rpx;
			line-height: 30rpx;
			text-align: left;
			.help{
				color: #C9A063;
				margin-left: 15rpx;
			}
			.helpIcon{
				width: 26rpx;
				height: 26rpx;
				display: inline-block;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
		}
		.stewardItem{
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				flex: 2;
			}
			.phone{
				flex: 3;
			}
			
		}
		.activeIndex{
			background: #f6f6f6;
		}
			
	}
</style>
